<template>
  <div class="pageLoading">
    <div class="loading"></div>
  </div>
</template>

<script>
export default {
  name: 'PageLoading',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.pageLoading {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: rgb(250, 248, 246);
  z-index: 1000;
  .loading {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    background-color: rgb(250, 248, 246);
    border-radius: 50%;
    animation: roll 1s infinite linear;
    &::before {
      content: "";
      display: block;
      margin-left: 50%;
      height: 100%;
      border-radius: 0 100% 100% 0 / 50%;
      background-color: inherit;
      transform-origin: left;
    }
    &::after {
      content: "";
      position: absolute;
      height: 50px;
      width: 50px;
      top: 5px;
      left: 5px;
      background: rgb(250, 248, 246);
      z-index: 1;
      border-radius: 50%;
    }
  }
}

@keyframes roll {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(0.5turn);
  }
}

// @keyframes bg {
//   50% {
//     background: $them;
//   }
// }

// ---- 不同端的样式适配 .green-them
.green-them {
  .pageLoading {
    .loading {
      background-image: linear-gradient(to right, transparent 50%, $them 0);
      &::before {
        animation: spin 0.5s linear infinite, bg 1s step-end infinite;
      }
    }
  }

  @keyframes bg {
    50% {
      background: $them;
    }
  }
}
// 不同端的样式适配 .green-them ----

// ---- 不同端的样式适配 .blue-them
.blue-them {
  .pageLoading {
    .loading {
      background-image: linear-gradient(
        to right,
        transparent 50%,
        $blue-them 0
      );
      &::before {
        animation: spin 0.5s linear infinite, bg-blue 1s step-end infinite;
      }
    }
  }

  @keyframes bg-blue {
    50% {
      background: $blue-them;
    }
  }
}
// 不同端的样式适配 .blue-them ----
</style>
